<template lang="html">
  <div class="header">
    <header>
      <h1>随心</h1>
      <p>————随心所欲，畅所欲言</p>
    </header>
    <nav>
      <ul>
        <li class="li"><nuxt-link :to="{path:'/'}">首页 </nuxt-link></li>
        <li class="li"><nuxt-link :to="{path:'/shortmes'}">简短留言 </nuxt-link></li>
        <li class="li"><nuxt-link :to="{path:'/article'}">发布文章 </nuxt-link></li>
        <li class="li"><nuxt-link :to="{path:'/photo'}">相册图集 </nuxt-link></li>
      </ul>
    </nav>
  </div>
</template>

<style lang="css" scoped>
  .header {
    width: 100%;

  }
  header {
    height: 200px;
    margin: 0px;
    padding:0px;
    text-align: center;
    background-image:url(/images/bgimg_r.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  header > h1 {
      margin: 0px;
      font-size: 42pt;
      text-indent:0px;
      line-height: 140px;
  }
  header > p {
    margin: 5px;
    text-indent:500px;
  }

  nav {
    background: #ff8;
  }
  nav > ul {
    margin: 0px;
    padding: 10px;
    text-align: left;
    display: inline-block;
  }
  @media (max-width: 799px) {
    nav > ul {
      padding-left: 10px;
      display: none;
    }
    nav > ul.open {
      display: block;
      position: left;
    }
  }
  .li {
    text-align: center;
    display: inline-block;
  }
  @media (max-width: 799px) {
    .li {
      text-align: left;
      display: block;
    }
  }
  a {
    text-decoration: none;
    padding: 10px;
    margin: 0px;
    font-weight: bold;
  }
  a:link, a:visited {
    color: #333;
  }
  a:hover, a:active {
    color: #f90;
  }
</style>
